#nibako {
    --main-color:#289BB9;
    max-width:1128px;
    /* font-feature-settings:"palt"; */
    margin-inline:auto;
}
#nibako [class*="nibako_"] {
    width:100%;
    padding-block:3.75em;
    font-family:'Noto Sans JP',sans-serif;
}

#nibako *,
#nibako *:before,
#nibako *:after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#nibako * {
    font-size:16px;
    line-height:1.35;
}
#nibako img { max-width:100%; height:auto; vertical-align:bottom;}
#nibako :where(ul, ol) { list-style:none;}
#nibako a { text-decoration:none;}
#nibako a[href^="tel"] { pointer-events:none;}
#nibako a:where(:link, :visited) { color:inherit;}

/* 共通パーツ */
#nibako ul.cation li { font-size:12px; padding-left:1em; text-indent:-1em;}
#nibako ul.cation li:before { content:"※"; font-size:1em;}

#nibako h4 {
    font-size:16px;
    text-align:center;
    margin-bottom:4.5em;

    & :where(strong, small) { display:block;}
    & strong {
        position:relative;
        font-size:2em;
        padding-bottom:0.5em;
        margin-bottom:0.8125em;
    }
    & strong:after {
        content:"";
        position:absolute;
        display:block;
        width:1.875em;
        aspect-ratio:60/5;
        background-color:var(--main-color);
        inset:auto 0 0 0;
        margin-inline:auto;
    }
    & small {
        font-size:1.25em;
    }
}

@media only screen and (width <= 896px) {
    #nibako [class*="nibako_"] {
        width:100%;
        padding-inline:5%;
    }
    #nibako h4 {
        
        & small {
            font-size:1.125em;
        }
    }
    #nibako a[href^="tel"] { pointer-events:auto;}
}


/* =============== FV (.nibako_fv) =============== */
#nibako .nibako_fv {
    position:relative;
    padding:0;
    margin-bottom:3.75em;

    & img { width:100%;}
    & ul {
        position:absolute;
        inset:auto 0 0 auto;
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_fv {
        max-width:90%;
        padding-top:1.5em;
        margin-inline:auto;

        & ul {
            position:static;
            margin:1em 1em 0;
        }
    }
}

/* =============== Nibakoの特徴 (.nibako_feature) =============== */
#nibako .nibako_feature {
    background-color:#FEFCF7;

    & .f_block {
        display:flex;
        justify-content:center;
        align-items:center;
        gap:0 3.75em;

        & > * { width:500px;}
        & + .f_block { margin-top:5em;}
        & img { aspect-ratio:5/3;}
        & .f_title {
            display:grid;
            place-items:center;
            margin-inline:0 auto;
            margin-bottom:1.25em;
            padding-inline-end:1em;
            width:295px;
            aspect-ratio:295/48;
            background-color:var(--main-color);
            color:#fff;
            font-size:1.5em;
            font-weight:bold;
            border-radius:8px;
        }
        & .f_catch {
            color:var(--main-color);
            font-size:1.625em;
        }
        & .f_text {
            margin-top:0.88em;
            font-size:1.125em;
        }
    }
    & .f_block.reverse {
        flex-direction:row-reverse;

        & li:nth-child(2) { text-align:end;}
        & .f_title { margin-inline:auto 0;}
    }

    & .f_official {
        margin-top:80px;

        & > * {
            width:fit-content;
            margin-inline:auto;
        }
        & .f_o_title {
            margin-bottom:1.25em;
            font-size:2em;
            font-weight:bold;
            color:var(--main-color);
        }
        & .f_o_btn {
            display:block;
            padding:0.5em 1.25em;
            font-size:1.5em;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:1lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,16%));
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_feature {

        & .f_block {
            flex-direction:column;

            & li { display:contents;}
            & picture {
                order:2;
                max-width:80%;
            }
            & .f_title {
                order:1;
                padding:0;
                margin-inline:auto;
            }
            & .f_catch {
                order:3;
                font-size:1.25em;
                text-align:center;
                margin-block:1em;
            }
            & .f_text {
                order:4;
                font-size:1em;
                margin:0;
            }
        }
        & .f_block.reverse {
            flex-direction:column;

            & li:nth-child(2) {
                text-align:unset;
            }

            & .f_title {
                margin-inline:auto;
            }
        }
        & .f_official {

            & .f_o_title {
                margin-bottom:0.75em;
            }
            & .f_o_btn {
                font-size:1.125em;
            }
        }
    }
}

/* =============== ご利用者様の声 (.nibako_voice) =============== */
#nibako .nibako_voice {
    position:relative;
    background-color:#F1F9F9;

    &:before {
        content:"";
        position:absolute;
        display:block;
        width:16.5em;
        aspect-ratio:263/186;
        background:url(png/nibako_voice_car.png) no-repeat center / contain;
        inset:0 0 auto auto;
    }

    & .v_block {
        display:flex;
        /* display:grid;
        grid-template-columns:repeat(2, 460px); */
        justify-content:space-evenly;
        flex-wrap:wrap;
        gap:5em 0;
        margin-bottom:6.25em;

        & > * { flex-basis:460px;}

        & li {
            display:grid;
            grid-template-rows:subgrid;
            grid-row:span 5;
            padding:2rem;
            border-radius:3rem;
            background-color:#d5ebee;
        }
        & .v_name {
            position:relative;
            width:fit-content;
            margin-bottom:1.66em;
            padding:1em 1.66em;
            background-color:#fff;
            font-size:1.125em;
            font-weight:bold;
            line-height:1.8;
            color:var(--main-color);
            border:solid 4px var(--main-color);
            border-radius:20px;
            filter:drop-shadow(4px 4px 0 var(--main-color));

            & strong {
                font-size:1.66em;
                padding-right:0.125em;
            }
            &:before {
                --w:1em;

                content:"";
                position:absolute;
                display:block;
                width:var(--w);
                height:calc(var(--w) / 2 * tan(60deg));
                background:url(svg/icon_cap.svg) no-repeat center / contain;
                inset:100% auto auto 3em;
            }
        }
        & .v_img {
            margin-inline:auto;
            margin-bottom:1.5em;
            position:relative;

            & img {
                width:370px;
                aspect-ratio:37/30;
                /* border-radius:100px; */
            }
        }
        & .v_img_sub img {
            position:absolute;
            display:block;
            width:40%;
            aspect-ratio:1;
            inset:auto -4rem -1rem auto;
            border-radius:100%;
            border:solid 2px #fff;
        }
        & .v_catch {
            margin-bottom:1.66em;
            font-size:1.5em;
        
            & mark {
                position:relative;
                display:block;
                width:fit-content;
                margin-inline:auto;
                padding-inline:1.5em;
                font-size:inherit;
                font-weight:bold;
                text-align:center;
                line-height:1.5;
                background:none;

                &:before {
                    --h:0.5lh;

                    content:"";
                    position:absolute;
                    display:block;
                    width:100%;
                    height:var(--h);
                    background-color:var(--main-color);
                    border-radius:var(--h);
                    inset:auto auto 0 50%;
                    translate:-50% 0;
                    opacity:0.2;
                }
            }
        }
        & .v_text {
            font-size:1.125em;
            text-align:justify;
        }
        & .v_sns {
            display:flex;
            align-items:center;
            gap:0 3em;
            margin-top:3em;

            & a {
                position:relative;
                display:block;
                min-width:80px;
                padding:0.33em 0.66em;
                background-color:#fff;
                border-radius:1lh;
                font-size:0.9375em;
                font-weight:bold;
                text-align:center;
                box-shadow:3px 3px 6px rgba(0,0,0,0.35);

                &[class] {
                    --before-gap:10px;
                    margin-left:calc(3em + var(--before-gap));
                }
                &[class]:before {
                    content:"";
                    position:absolute;
                    width:3em;
                    aspect-ratio:1/1;
                    background:url() no-repeat center / contain;
                    inset:50% calc(100% + var( --before-gap)) auto auto;
                    translate:0 -50%;
                }
                &.insta:before { background-image:url(svg/icon_instagram.svg);}
                &.hp:before { background-image:url(svg/icon_hp.svg);}
            }
        }
    }

    & .v_follow {
        text-align:center;

        & .v_title {
            color:var(--main-color);
            font-size:2em;
            font-weight:bold;
            margin-bottom:1.25em;
        }
        & a {
            display:flex;
            align-items:center;
            gap:0 0.45em;
            width:fit-content;
            margin:0 auto 1.25em;
            padding:0.5em 1.25em;
            background-color:#fff;
            color:var(--main-color);
            font-size:1.375em;
            line-height:1.35;
            border-radius:1lh;
            border:solid 3px var(--main-color);

            &:after {
                content:"";
                display:block;
                height:1.25em;
                aspect-ratio:1/1;
                background:url(svg/icon_instagram.svg) no-repeat center / contain;
            }
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_voice {

        &:before {
            width:7em;
            inset:auto auto 100% 50%;
            translate:-50% 50%;
        }

        & .v_block {
            flex-direction:column;
            /* grid-template-columns:auto; */
            gap:3em 0;

            & li {
                display:block;
                padding:2rem 1rem;
                border-radius:2rem;
            }
            & .v_name {
                margin-inline:auto;
                padding:0.75em 1.25em;
                width:max(270px, 80%);
                font-size:1em;
                text-align:center;
            }
            & .v_img {
                text-align:center;
            }
            & .v_img img {
                width:100%;
            }
            & .v_img_sub img {
                width:40%;
                inset:auto -3rem -1rem auto;
            }
            & .v_catch {
                font-size:1.125em;
            }
            & .v_catch mark {
                padding-inline:1em;
            }
            & .v_text {
                font-size:1em;
            }
            & .v_sns {
                justify-content:space-between;
                gap:0;
                margin-top:2em;
            }
        }
    }
}
/* =============== こんな方におススメ (.nibako_reco) =============== */
#nibako .nibako_reco {
    background-color:#F4FFF4;

    & .reco_block {
        counter-reset:rb_title 0;

        display:grid;
        grid-template-columns:500px 250px;
        justify-content:center;
        align-items:center;
        gap:60px 100px;
        direction:rtl;

        & .rb_text {
            direction:ltr;
            text-align:start;
        }
        & .rb_title {
            margin-bottom:0.769em;
            font-size:1.625em;
        }
        & .rb_title:before {
            counter-increment:rb_title;
            content:counter(rb_title) ".";
            color:var(--main-color);
            font-size:1.38em;
            font-weight:bold;
        }
    }
}

@media only screen and (width <= 896px) {
    #nibako .nibako_reco {
        & .reco_block {
            grid-template-columns:auto;
    
            & .rb_img {
                justify-self:center;
                width:85%;
            }
            & .rb_title {
                font-size:1.5em;
            }
        }
    }
}


/* =============== お問い合わせ (.nibako_contact) =============== */
#nibako .nibako_contact {
    background-color:#F9F3E4;
    padding-bottom:6.25em;

    & .c_details {
        display:flex;
        justify-content:space-evenly;

        & li {
            text-align:center;
        }
        & .c_title {
            margin-bottom:1lh;
            font-size:1.375em;
            font-weight:bold;
        }
        & .c_phone {
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            width:360px;
            aspect-ratio:36/7;
            margin-bottom:0.625em;
            font-size:2em;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:10lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.15));
        }
        & .c_phone:before {
            content:"";
            display:block;
            height:1lh;
            aspect-ratio:1/1;
            background:url(svg/icon_phone.svg) no-repeat center / contain;
        }
        & .c_form {
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            width:360px;
            aspect-ratio:36/7;
            margin-bottom:0.625em;
            font-size:1.5em;
            font-weight:bold;
            color:var(--main-color);
            background-color:#fff;
            border:solid 3px var(--main-color);
            border-radius:10lh;
            filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.15));
        }
        & .c_form:before {
            content:"";
            display:block;
            height:1lh;
            aspect-ratio:1/1;
            background:url(svg/icon_doc.svg) no-repeat center / contain;
        }
    }

}

@media only screen and (width <= 896px) {
    #nibako .nibako_contact {

        & .c_details {
            flex-direction:column;
            gap:4.5em;

            & :is(.c_phone, .c_form) {
                width:min(323px, 100%);
                margin-inline:auto;
            }
        }
    }
}